// @chearset 'utf-8';

@import url(./public.less);

// 页头
@import url(./header.less);

// 导航栏
nav {
  width: 100%;
  font-size: 14px;
  border-bottom: 1px solid silver;
  .wrap {
    width: 1226px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    a {
      color: black;
      &:hover {
        color: #ed712e;
      }
    }
    .logo {
      width: 100px;
      float: left;
      margin-top: 30px;
      img {
        width: 50px;
        height: 50px;
      }
    }
    .ul_one {
      float: left;
      margin-left: 15px;
      > li {
        float: left;
        height: 40px;
        line-height: 40px;
        padding: 0 20px 30px 0;
        margin-top: 30px;
        vertical-align: middle;
        a:hover {
          color: #ed712e;
        }
        &:hover {
          .div_one {
            border-top: 1px solid silver;
          }
          .left {
            display: block;
          }
        }
        .left {
          position: absolute;
          left: 0;
          top: 101px;
          z-index: 24;
          display: none;
          .left_one {
            height: 418px;
            width: 234px;
            padding: 10px 0;
            border: 1px solid #ff6700;
            color: #fff;
            background: #fff;
            > li {
              .one_a {
                position: relative;
                display: block;
                padding-left: 30px;
                height: 42px;
                line-height: 42px;
                &:hover {
                  background-color: #ed712e;
                  color: white;
                }
                &:after {
                  content: ">";
                  font-weight: bold;
                  color: silver;
                  float: right;
                  margin-right: 20px;
                }
              }
              &:hover .show_hide {
                display: block;
              }
              .show_hide {
                height: 440px;
                max-width: (1200px-234);
                background-color: white;
                position: absolute;
                left: 236px;
                top: 0;
                box-shadow: 0 8px 16px rgb(0 0 0/ 18%);
                display: none;
                .left_two {
                  display: flex;
                  flex-wrap: wrap;
                  height: 420px;
                  writing-mode: vertical-lr;
                  li {
                    width: 225px;
                    height: 34px;
                    padding: 18px 20px;
                    writing-mode: horizontal-tb;
                    a {
                      color: black;
                      display: inline-block;
                      line-height: 40px;
                      height: 40px;
                      overflow: hidden;
                      font-size: 14px;
                      margin-left: 5px;
                      &:hover {
                        color: #ed712e;
                      }
                    }
                    img {
                      height: 40px;
                      width: 40px;
                      display: inline-block;
                    }
                  }
                }
              }
            }
          }
        }
        .div_height {
          height: 200px !important;
        }
        .div_one {
          position: absolute;
          height: 0px;
          width: 1440px;
          left: -108px;
          top: 100px;
          background-color: white;
          position: absolute;
          z-index: 23;
          overflow: hidden;
          box-shadow: 0 3px 4px rgb(0 0 0/ 18%);
          transition: all 0.2s;
          .ul_two {
            margin: 0 150px;
            text-align: center;
            display: flex;
            justify-content: space-between;
            > li {
              height: 100%;
              width: 150px;
              padding: 20px 0;
              cursor: pointer;
              .list-img {
                height: 103px;
                width: 150px;
                border-right: 1px silver solid;
                padding-right: 20px;
                img {
                  width: 150px;
                  height: 103px;
                }
              }
              &:last-child .list-img {
                border-right: none;
              }
              h1 {
                font-size: 14px;
                font-weight: normal;
                height: 20px;
                line-height: 20px;
              }
              span {
                display: block;
                color: #ed712e;
                font-size: 10px;
                height: 20px;
                line-height: 20px;
              }
            }
          }
        }
      }
    }
    .inp {
      width: 300px;
      float: right;
      margin-top: 25px;
      .inp-text {
        width: 235px;
        height: 48px;
        padding-left: 10px;
        line-height: 48px;
        background-color: white;
        border-top: 1px solid silver;
        border-left: 1px solid silver;
        border-bottom: 1px solid silver;
        border-right: none;
        vertical-align: middle;
        outline: none;
      }
      .inp-sub {
        // border-left: none;
        background: white;
        line-height: 50px;
        height: 50px;
        width: 52px;
        border: 1px solid silver;
        font-size: 20px;
        vertical-align: middle;
        &:hover {
          background-color: #ed712e;
          color: white;
        }
      }
    }
  }
}

//滚动导航
.swiper-nav {
  position: sticky;
  top: 0px;
  height: 60px;
  width: 100%;
  color: #616161;
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 5px 5px rgb(0 0 0/ 7%);
  z-index: 20;
  .wrap {
    h2 {
      font-weight: 400;
      color: black;
      font-size: 18px;
      display: inline-block;
      margin-right: 10px;
      line-height: 60px;
    }
    .left {
      display: inline-block;
      a {
        display: inline-block;
        font-size: 12px;
        margin: 0 10px;
        color: #616161;
      }
      span {
        vertical-align: middle;
      }
    }
    .right {
      height: 60px;
      line-height: 60px;
      float: right;
      a {
        display: inline-block;
        font-size: 12px;
        margin: 0 10px;
        color: #616161;
      }
      span {
        vertical-align: middle;
        color: silver;
      }
    }
  }
}

// 立即登录
.login {
  text-align: center;
  height: 50px;
  line-height: 50px;
  width: 100%;
  background-color: #f7f7f7;
  color: #333;
  font-size: 14px;
  .wrap {
    .text {
      a {
        color: #ff6700;
        margin-left: 25px;
        cursor: pointer;
      }
      span {
        margin-left: 18px;
        width: 18px;
        vertical-align: middle;
        cursor: pointer;
      }
    }
  }
}

// 商品详情
.mi-product {
  font-size: 14px;
  .wrap {
    .mi-product-detail {
      display: flex;
      justify-content: center;
      padding-top: 32px;
      padding-bottom: 12px;
      .detail-img {
        width: 606px;
        .swiper {
          .swiper-wrapper {
            img {
              margin: 0 auto;
              display: block;
              width: 560px;
              height: 560px;
              background-color: white;
            }
          }
          .swiper-pagination {
            span {
              width: 50px;
              border-radius: 0px;
              height: 3px;
            }
            .swiper-pagination-bullet-active {
              background-color: #a3a3a3;
            }
          }
          .swiper-button-prev {
            color: rgba(225, 222, 222, 0.762);
            height: 80px;
            width: 40px;
            &:hover {
              color: white;
              background-color: rgba(200, 199, 199, 0.6);
            }
          }
          .swiper-button-next {
            color: rgba(225, 222, 222, 0.762);
            height: 80px;
            width: 40px;
            &:hover {
              color: white;
              background-color: rgba(105, 101, 101, 0.6);
              border-radius: 5px;
            }
          }
        }
      }
      .detail-con {
        flex: 1;
        margin-left: 20px;
        > h2 {
          font-size: 24px;
          font-weight: 400px;
          color: #212121;
        }
        .desc {
          color: #b0b0b0;
          padding-top: 8px;
          line-height: 1.5;
          font-size: 14px;
          span {
            color: #ff4a00;
          }
        }
        .myself {
          margin-top: 14px;
          color: #ff6700;
        }
        .price {
          font-size: 18px;
          line-height: 1;
          color: #ff6700;
          padding: 12px 0 10px;
        }
        hr {
          border: 0.5px solid silver;
          margin-top: 12px;
        }
        .gifts {
          padding: 24px 0 0;
          border-bottom: 1px solid #e0e0e0;
          .gift {
            margin-bottom: 24px;
            overflow: hidden;
            > span {
              float: left;
              width: 80px;
              padding: 2px 0;
              text-align: center;
              background-color: #ff6700;
              color: #fff;
              display: block;
            }
            > p {
              float: left;
              display: block;
              line-height: 26px;
              width: 430px;
              margin-left: 10px;
              margin-bottom: 10px;
            }
            > div {
              font-size: 14px;
              line-height: 19px;
              clear: both;
              margin-left: 90px;
              width: 430px;
            }
          }
        }
        .address {
          padding: 30px 50px;
          background: #fafafa;
          border: 1px solid #e0e0e0;
          position: relative;
          margin: 20px 0;
          i {
            position: absolute;
            left: 20px;
            top: 29px;
            font-size: 20px;
            color: #999;
          }
          > div {
            > span {
              display: inline-block;
              margin-right: 14px;
            }
            > a {
              color: #ff6700;
            }
          }
          > a {
            color: #ff6700;
          }
        }
        .check-box {
          .check {
            margin-bottom: 30px;
            .ver-title {
              font-size: 18px;
            }
            > ul {
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;
              > li {
                margin-top: 10px;
                line-height: 42px;
                height: 42px;
                position: relative;
                border: 1px solid #e0e0e0;
                list-style: none;
                cursor: pointer;
                transition: all 0.2s ease;
                float: left;
                width: 292px;
                font-size: 16px;
                text-align: center;
                color: #757575;
                &:hover {
                  border-color: #ff6700;
                }
                &:nth-child(1) {
                  border-color: #ff6700;
                }
              }
            }
          }
        }
        .service-box {
          .service {
            margin-bottom: 30px;
            .service-title {
              margin-bottom: 15px;
              > span {
                font-size: 18px;
                line-height: 1;
              }
              > a {
                color: #ff6700;
                font-size: 14px;
                float: right;
                line-height: 18px;
              }
            }
            .service-active {
              border-color: #ff6700 !important;
              .radio {
                border-color: #ff6700 !important;
                background-color: #ff6700 !important;
                i {
                  display: block !important;
                  color: white !important;
                }
              }
              .box {
                > h3 {
                  color: #ff6700 !important;
                }
              }
              .reader {
                .reader-check {
                  border-color: #ff6700 !important;
                  background-color: #ff6700 !important;
                  vertical-align: 0px !important;
                  i {
                    display: block !important;
                    color: white !important;
                  }
                }
              }
            }
            .service-con {
              border: 1px solid #e0e0e0;
              background-color: #fff;
              cursor: pointer;
              padding: 30px 0;
              display: flex;
              .radio {
                border-radius: 50%;
                border: 1px solid silver;
                width: 16px;
                height: 16px;
                line-height: 16px;
                margin-left: 30px;
                float: left;
                text-align: center;
                margin-top: 15px;
                i {
                  font-size: 12px;
                  display: none;
                }
              }
              > img {
                width: 50px;
                height: 50px;
                display: block;
                margin: 0 15px 0 10px;
              }
              .box {
                flex: 1;
                > h3 {
                  font-weight: 400;
                  font-size: 18px;
                  margin-bottom: 10px;
                  > em {
                    font-style: normal;
                    font-size: 14px;
                    background-color: #ff6700;
                    padding: 2px 6px;
                    border-radius: 20px;
                    color: #fff;
                    margin-left: 2px;
                  }
                }
                > p {
                  margin: 0;
                  padding: 0;
                  font-size: 14px;
                  height: 18px;
                  color: #b0b0b0;
                  width: 286px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  margin-top: 5px;
                }
                .reader {
                  height: 25px;
                  margin-top: 10px;
                  .reader-check {
                    border: 1px solid silver;
                    width: 14px;
                    height: 14px;
                    line-height: 14px;
                    text-align: center;
                    vertical-align: sub;
                    display: inline-block;
                    vertical-align: -3px;
                    i {
                      font-size: 12px;
                      display: none;
                    }
                  }
                  > span {
                    display: inline-block;
                    color: #ff6700;
                    > a {
                      color: #ff6700;
                      margin: 0 2px;
                    }
                  }
                  .pric {
                    float: right;
                    color: #757575;
                    margin-right: 20px;
                  }
                }
              }
            }
          }
        }
        .service-sum {
          background: #f9f9fa;
          padding: 30px;
          margin-bottom: 30px;
          .selected {
            line-height: 30px;
            color: #616161;
            p {
              float: right;
            }
          }
          .total {
            color: #ff6700;
            font-size: 24px;
            padding-top: 20px;
          }
        }
        .service-btn {
          margin: 10px 0 20px 0;
          .add {
            display: inline-block;
            margin-right: 10px;
            width: 298px;
            height: 52px;
            line-height: 52px;
            font-size: 16px;
            background: #ff6700;
            border-color: #ff6700;
            color: #fff;
            text-align: center;
            cursor: pointer;
            &:hover {
              background-color: #f25807;
              border-color: #f25807;
              color: #fff;
            }
          }
          .love {
            display: inline-block;
            width: 140px;
            height: 52px;
            line-height: 52px;
            border: 1px solid #b0b0b0;
            text-align: center;
            cursor: pointer;
            transition: all 0.4s;
            font-size: 16px;
            background-color: #b0b0b0;
            color: #fff;
            i {
              font-size: 22px;
              margin-right: 5px;
              vertical-align: -3px;
              font-weight: 1000;
            }
            &:hover {
              background-color: #757575;
              border-color: #757575;
              color: #fff;
            }
          }
        }
        .service-info {
          span {
            display: inline-block;
            color: #b0b0b0;
            margin-right: 15px;
            line-height: 30px;
            white-space: nowrap;
            i {
              font-size: 20px;
              vertical-align: -3px;
            }
            em {
              font-style: normal;
              margin-left: 2px;
            }
          }
        }
      }
    }
  }
  .explain {
    padding-bottom: 50px;
    background-color: #f5f5f5;
    .wrap {
      > h3 {
        font-size: 22px;
        font-weight: 400;
        padding: 22px 0;
      }
      > img {
        width: 100%;
      }
    }
  }
}

// 尾部
@import url(./footer.less);

//移动
@import url(./home-bar.less);
